﻿<!DOCTYPE html>

<html>
<head>
    
    <title></title>
    <script src="../scripts/jquery-1.8.0.min.js"></script>
    <script src="../scripts/jquery.tools.min.js"></script>
    <script src="../scripts/MicrosoftAjax.js" type="text/javascript"></script>
    <script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>
    <script type="text/javascript" src="/_layouts/15/sp.js"></script>
    <script src="../Scripts/Full.js"></script>
    <script src="../scripts/Scrollable.js"></script>
    <link rel="Stylesheet" type="text/css" href="../Content/App.css" />
    <link rel="Stylesheet" type="text/css" href="../Content/SPG_Scrollable.css" /> 
    <script type="text/javascript">
        $(document).ready(function () {                
            sharePointReady().promise().done(function () {
                $('.thumbnailcontainer .scrollable .items img').first().click();
                $(".thumbnailcontainer .scrollable").scrollable();
            });
        });
        
    </script> 
</head>
<body>    
    <div class="spotlightcontainer">
        <div id="image_wrap">
            <div class="image_wrap_img">
                <!-- Initially the image is a simple 1x1 pixel transparent GIF -->
                <img src='../Images/blank.gif' />
            </div>
            <div class="image_wrap_details">
                <strong>default strong text here</strong>
                <p>default paragraph here</p>
                <a href="nothing">default hyperlink text here</a>
            </div>
        </div>
        <!-- HTML structures -->
        <div class='thumbnailcontainer'>
            <!-- 'previous page' action -->
            <a class='prev browse left'></a>
            <!-- root element for scrollable --> 
                <div class='scrollable'>
                    <!-- root element for the items -->
                    <div id='itemsDiv' class='items'>

                    </div>
                </div>
            <!-- 'next page' action -->
            <a class='next browse right'></a>
        </div>
    </div>
    <div class='itemshiddencontainer'>

    </div>
</body>
</html>